<template>
  <div>
    <!-- 头部 -->
    <heard></heard>
    <!-- 占位 -->
    <router-view />

    <!-- 页脚 -->
    <div class="footer"  v-show="$route.path!='/home/position'" >
      <div class="center">
        <div class="footer-up">
          <p class="daowei1">到位 服务保障</p>
          <p class="daowei2">到位平台担保交易安全,交易未成功100%退款</p>
          <div class="daowei3">
            <div>
              <img src="../assets/icon/bao1.png" alt="">
              <span>未服务全额退</span>
            </div>
            <div>
              <img src="../assets/icon/bao2.png" alt="">
              <span>爽约包赔</span>
            </div>
           <div>
              <img src="../assets/icon/bao3.png" alt="">
              <span>不满意重服务</span>
            </div>
            <div>
              <img src="../assets/icon/bao4.png" alt="">
              <span>全场保障</span>
            </div>
          </div>        
        </div>
        <div class="footer-mid">
          <div class="footer-mid-left">热门城市</div>
          <div class="footer-mid-right">
            <span v-for="item in cities[0].city" :key="item">{{item}}</span>
          </div>
        </div>
        <div class="footer-down">
          <p>&copy;2020&nbsp;版权所有&nbsp;到位&nbsp;daoway.com <span>京ICP备15001471号-1</span>&nbsp;北京邻家科技有限公司&nbsp;&nbsp;&nbsp;<span class="ga">京公网安备11010102003774号</span>&nbsp;&nbsp;&nbsp;增值电信业务经营许可证:&nbsp;<span>B2-20200261</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import heard from '../components/Header.vue'
import {ref,reactive} from 'vue'
import httpApi from '@/http'
import { computed } from '@vue/reactivity';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
interface City{
  city:[],
  indexes:string
}
const activ = ref(1)
//页脚城市请求
const cities = reactive<City[]>([])
httpApi.cityApi.queryAllcity().then(res =>{

  cities.push(...res.data.data)  
})
const keyword = ref()
let city = computed(()=>{
  return useStore().state.city
})
const searchServe =  (keyword:string) => {
  const to = useRouter().resolve({
    name:'search-serve',
    query:{
      keyword
    }
  })
  window.open(to.href,'_blank')
}

</script>

<style lang="scss">


.footer{
  background-color: #CA3544;
  color: #F8E7E9;
  text-align: center;
  .footer-up{
    
    .daowei1{
      font-size: 26px;
      padding-top: 55px;
    }
    .daowei2{
      font-size: 20px;
      margin-top: 20px;
    }
    .daowei3{
      margin: 35px 0 35px 5px;
      display: flex;
      align-items: center;
      div{
        display: flex;
        align-items: center;
        margin: 0 50px;
        img{
          display: inline-block;
        }
        span{
          font-size: 18px;
          padding: 0 10px;
        }
      }
    }
  }
  .footer-mid{
    border-top: 1px solid #E85868;
    border-bottom: 1px solid #E85868;
    height: 183px;
    color: #F7DFE4;
    .footer-mid-left{
      margin-top: 60px;
      float:left;
      font-size: 20px;
      font-weight: bold;
    }
    .footer-mid-right{
      float:left;
      margin: 60px 0  0 30px;
      width: 1070px;
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      span{
        display: inline-block;
        width: 90px;
        padding: 5px 0;
      }
    }
  }
  .footer-down{
    text-align: center;
    padding: 20px 0 10px;
    font-size: 14px;
    span{
      color: #FFFFDE;
    }
    .ga{
      padding-left: 25px;
      background-image: url(../assets/icon/pol.png);
      background-repeat: no-repeat;
    }
  }
}
</style>
